<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Chat Application</title>
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.4/css/all.min.css">
    <link rel="stylesheet" href="/css/styles.css">
</head>
<body>
    <!-- 登录面板 -->
    <div id="loginPanel">
        <div class="login-container">
            <h1>Welcome to Chat</h1>
            <input type="text" id="username" placeholder="Enter your username" onkeypress="handleKeyPress(event)">
            <button onclick="login()">Login</button>
        </div>
    </div>

    <!-- 聊天面板 -->
    <div id="chatPanel" style="display: none;">
        <!-- 头部栏 -->
        <div class="header">
            <div class="current-user">
                <div id="currentUserAvatar" class="user-avatar"></div>
                <span id="currentUserName"></span>
                <span class="user-status"><i class="fas fa-circle"></i> Online</span>
            </div>
            <button class="logout-button" onclick="logout()">
                <i class="fas fa-sign-out-alt"></i>
                <span>Logout</span>
            </button>
        </div>

        <!-- 侧边栏 -->
        <div class="sidebar">
            <div class="search-container">
                <input type="text" id="userSearch" placeholder="Search users...">
            </div>
            <div id="userList" class="user-list"></div>
        </div>

        <!-- 聊天区域 -->
        <div class="chat-container">
            <div class="chat-header">
                <span id="chatWith">Select a user</span>
            </div>
            <div id="messageArea"></div>
            <div class="input-container">
                <textarea 
                    id="messageInput" 
                    placeholder="Type a message..." 
                    onkeypress="handleKeyPress(event)"
                    rows="1"
                    disabled
                ></textarea>
                <button class="send-button" onclick="sendMessage()" disabled>
                    <i class="fas fa-paper-plane"></i>
                </button>
            </div>
        </div>
    </div>

    <!-- 脚本引入 -->
    <script src="/js/config.js"></script>
    <script src="/js/managers/WebSocketManager.js"></script>
    <script src="/js/managers/MessageManager.js"></script>
    <script src="/js/managers/UserManager.js"></script>
    <script src="/js/handlers/MessageHandler.js"></script>
    <script src="/js/ui/UIManager.js"></script>
    <script src="/js/app.js"></script>
</body>
</html> 